<template>
  <BasicModal
    v-bind="$attrs"
    :title="t('routes.demo.FigureDocSettings.typeBind')"
    @register="register"
    @ok="handleSubmit"
    :destroyOnClose="true"
    :minHeight="300"
    :width="600"
  >
    <div style="display: flex; justify-content: center; align-items: center">
      <Transfer
        :titles="[
          t('routes.demo.FigureDocSettings.unboundAssociatedGraphicsType'),
          t('routes.demo.FigureDocSettings.boundAssociatedGraphicsType'),
        ]"
        :listStyle="{ width: '250px', height: '300px' }"
        :dataSource="allBingList"
        :targetKeys="bingList"
        :render="(item) => item.title"
        @change="handleChange"
      />
    </div>
  </BasicModal>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { Transfer } from 'ant-design-vue';
  import { getNoBdDocType, updateBingDocType } from '/@/api/demo/system';

  const { t } = useI18n();
  const { createMessage } = useMessage();
  const allBingList = ref([]);
  const bingList = ref([]);
  const DocTypeId = ref('');

  // 提交
  const handleSubmit = async () => {
    const filteredData = allBingList.value.filter((item) => bingList.value.includes(item.key));
    updateBingDocType(DocTypeId.value, filteredData).then((res) => {
      if (res) {
        createMessage.success(t('common.saveSuccess'));
        closeModal();
      }
    });
  };

  const handleChange = (nextTargetKeys: string[]) => {
    bingList.value = nextTargetKeys;
  };

  // 初始化弹窗
  const [register, { setModalProps, closeModal }] = useModalInner((data) => {
    setModalProps({ confirmLoading: false });
    DocTypeId.value = data.id;
    getNoBdDocType(data.id).then((res) => {
      allBingList.value = res.allBingList === null ? [] : res.allBingList;
      bingList.value = res.bingList === null ? [] : res.bingList.map((item) => item.key);
    });
  });
</script>
